<header class="header">
  <ng-container *ngIf="isZenMode$ | async; else logoWithLink">
    <span class="header__logo">
      <hydro-icon type="logo" class="header__logo-icon"></hydro-icon>
    </span>
  </ng-container>

  <nav class="header__navigation" hsHideInZenMode>
    <a
      class="header__navigation-item"
      [routerLink]="['/models']"
      routerLinkActive="header__navigation-item--active"
    >
      <hydro-icon
        type="icon-models"
        class="header__navigation-icon header__navigation-icon--models"
      ></hydro-icon>
      <span class="models-link-label">Models</span>
    </a>
    <a
      class="header__navigation-item"
      [routerLink]="['/applications']"
      routerLinkActive="header__navigation-item--active"
    >
      <hydro-icon
        type="icon-applications"
        class="header__navigation-icon header__navigation-icon--applications"
      ></hydro-icon>
      <span class="services-link-label">Applications</span>
    </a>
  </nav>
  <div class="header__support-info">
    <a
      class="header__documentation"
      target="_blank"
      rel="noopener noreferrer"
      href="https://hydrosphere.io/serving-docs"
    >
      documentation
    </a>
    <a class="header__build-info" hsBuildInformation>
      build information
    </a>
  </div>
</header>

<ng-template #logoWithLink>
  <span class="header__logo" [routerLink]="['/']">
    <hydro-icon type="logo" class="header__logo-icon"></hydro-icon>
  </span>
</ng-template>
